<template>
  <div class="pro_div">
    <div class="img_top">
      <img :src="back_img.img" alt="" />
      <!-- <span> {{ back_img.intro }} </span> -->

      <div class="monkey_main">
        <h3 class="title">走进神猴</h3>
        <el-tabs class="tab" :tab-position="tabPosition">
          <el-tab-pane
            :label="item.title"
            v-for="item in companyList"
            :key="item.id"
          >
            <div class="article" v-html="item.content"></div>
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>
  </div>
</template>

<script>
import { Message } from "element-ui";
import { formatDate } from "../components/datas.js";
export default {
  data() {
    return {
      back_img: {},
      obj: {
        page: 0,
      },
      tabPosition: "left",
      list: {},
      is_list: true,
      companyList: [],
    };
  },
  created() {
    this.getList();
  },
  mounted() {
    let headers = {
      token: this.$md5(this.$key + this.$dataTime()),
      rtimes: this.$dataTime(),
      btype: "sh",
    };
    this.$axios
      .post(this.$base + "/Index/getBg", headers)
      .then((res) => {
        if (res.data.code == 2000) {
          this.back_img = res.data.data;
        } else {
          Message.error(res.data.msg);
        }
        console.log(this.back_img, "this.back_img");
      })
      .catch(function (error) {
        Message.error(error.message);
      });
    headers.title = "news";
    this.$axios
      .post(this.$base + "/Index/getWebInfo", headers)
      .then((res) => {
        if (res.data.code == 2000) {
          var link =
            document.querySelector("link[rel*='icon']") ||
            document.createElement("link");
          link.type = "image/x-icon";
          link.rel = "shortcut icon";
          link.href = res.data.data.ico;
          document.title = res.data.data.web_title;
          document.getElementsByTagName("head")[0].appendChild(link);
        } else {
          Message.error(res.data.msg);
        }
        // console.log(res);
      })
      .catch(function (error) {
        Message.error(error.message);
      });
    this.qingqiu();
  },
  methods: {
    getList() {
      this.$axios
        .post(this.$base + "/zjsh/list")
        .then((res) => {
          if (res.data.code == 2000) {
            this.companyList = res.data.data;
            // console.log(this.companyList, "companyList");
          } else {
            Message.error(res.data.msg);
          }
        })
        .catch(function (error) {
          Message.error(error.message);
        });
    },

    routers_fn(id) {
      this.$router.push(`/details?type=1&id=${id}`);
    },
    fn(el) {
      this.obj.page = el;
      this.list_fn(this.obj.page);
    },
    genduo() {
      this.obj.page = this.obj.page + 1;
      this.is_list = false;
      this.list_fn(this.obj.page);
    },
    list_fn(page) {
      let headers = {
        token: this.$md5(this.$key + this.$dataTime()),
        rtimes: this.$dataTime(),
        page: this.obj.page,
      };
      this.$axios
        .post(this.$base + "/News/newsLists", headers)
        .then((res) => {
          if (res.data.code == 2000) {
            this.list = res.data.data;
          } else {
            Message.error(res.data.msg);
          }
          console.log(res);
        })
        .catch(function (error) {
          Message.error(error.message);
        });
    },
    data_fn(time, ges) {
      return formatDate(new Date(Number(time)), ges);
    },
    qingqiu() {
      let headers = {
        token: this.$md5(this.$key + this.$dataTime()),
        rtimes: this.$dataTime(),
      };
      this.$axios
        .post(this.$base + "/News/newsNow", headers)
        .then((res) => {
          if (res.data.code == 2000) {
            // console.log(res.data.data);
            this.list = res.data.data;
          } else {
            Message.error(res.data.msg);
          }
          // console.log(res);
        })
        .catch(function (error) {
          Message.error(error.message);
        });
    },
  },
};
</script>

<style lang="less" scoped>
.img_top {
  width: 100%;
  overflow: hidden;
  position: relative;
  background: #fff;
  img {
    width: 100%;
    height: auto;
  }

  span {
    position: absolute;
    left: 346px;
    top: 180px;
    line-height: 80px;
    font-size: 40px;
    color: #dcdcdc;
    letter-spacing: 10px;
    font-weight: 600;
  }
}
/deep/.el-tabs__item {
  font-size: 18px !important;
  height: 64px;
  line-height: 64px;
  font-weight: 600;
}
.monkey_main {
  margin: 54px auto;
  width: 1200px;
  // border: 1px solid red;
  // height: 800px;
  .title {
    margin: 0;
    height: 76px;
    line-height: 76px;
    width: 100%;
    font-size: 26px;
    color: #000;
    border-bottom: 3px solid #e9ecf3;
  }
  .tab {
    margin-top: 30px;
    .article {
      margin-left: 14px;
      width: 1000px;
      // height: 580px;
      // background: rgb(247, 244, 244);
      float: left;
      padding: 0px 16px 10px 16px;
    }
  }
}
@keyframes example {
  50% {
    top: -150px;
  }

  100% {
    top: -50px;
  }
}
</style>
